<template>
	<view class="">
		<view class="list">
			<view class="site-con flex-justify-s " v-for="(item,index) in data.list" :key="index">
				<img class="club-cd-type" :src="imgArr[item.code-1].img" alt="">
				<view class=" flex-center-a flex cd-con">
					<text class="title">{{item.value}}场地订场</text>
					<!-- <text class="time">营业时间：10:00-20:00</text> -->
					<view class="flex-align-center">
						<view class="lable-item">{{item.value}}</view>
						<view class="lable-item">开放中</view>
					</view>
				</view>
				<view @click="bookingVenue(item.code)" class="gz-btn">我要订场</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	import {siteTypes} from '../../../requestApi/api.js';
	import {imgArr} from '../../../utils/uitls.js';
	const data=ref({
		id:'',
		list:[]
	})
	onLoad((e)=>{
		data.value.id=e.id;
		getList();
	})
	//订场
	const bookingVenue=(code)=>{
		uni.navigateTo({
			url:`/pages/booking/booking/booking?entid=${data.value.id}&type=${code}`
		})
	};
	//获取场地类型
	const  getList=()=>{
		siteTypes({id:data.value.id}).then(res=>{
			data.value.list=res.data
		})
	};
</script>

<style lang="scss">
	.list{
		padding: 20rpx 60rpx;
	}
	.site-con {
		margin-bottom: 20rpx;
		height: 180rpx;
		background: rgba(233, 246, 254, 0.39);
		border-radius: 20rpx;
		width: 100%;
		padding: 0 26rpx;
	
		.club-cd-type {
			width: 138rpx;
			height: 148rpx;
			margin-right: 16rpx;
		}
	
		.cd-con {
			height: 148rpx;
			align-items: flex-start;
	
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2C2C2C;
			}
	
			.time {
				font-size: 20rpx;
				color: #A5A5A5;
			}
	
			.lable-item {
				height: 36rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 8rpx;
				padding: 0 18rpx;
				line-height: 36rpx;
				font-size: 20rpx;
				color: #3C66F6;
				margin-right: 20rpx;
			}
		}
	
	
	}
		.gz-btn {
			width: 167rpx;
			height: 60rpx;
			background: rgba(61, 102, 246, 1);
			box-shadow: 0rpx 4rpx 12rpx rgba(61,102,246,0.55);
			border-radius: 30rpx;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 60rpx;
			color: #FFFFFF;
			text-align: center;
		}	
</style>